<template>
  <!-- tabs -->
  <ul class="tabs flex w-full">
    <li
      :class="['px-4 py-2 cursor-pointer', { active: activeIndex === index }]"
      v-for="(item, index) in items"
      :key="index"
      @click="activeIndex = index"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script setup lang="ts" generic="T">
defineProps({
  items: {
    type: Array as PropType<Array<T>>,
    default: () => []
  }
})

// v-model
const activeIndex = defineModel<number>({ default: 0 })
</script>

<style scoped lang="scss">
.tabs {
  .active {
    --at-apply: text-sky-400 relative;
    &::after {
      content: '';
      --at-apply: absolute bg-sky-400 w-8 h-[2px] bottom-0 left-[calc(50%-1rem)];
    }
  }
}
</style>
